/* eslint-disable prettier/prettier */
import * as echarts from 'echarts'
import { fontSize } from './fontSize'
/**
 *
 * @method 图表绘制(折线图柱状图)
 * @param id 图表id
 * @param chartData 图表数据
 * @param title 标题
 * @param type
 * @param length
 */

export function chartLoad(chartData, id, title, type) {
  console.log(chartData, 'chartData')
  var dom = document.getElementById(id)
  var myChart = echarts.init(dom)
  myChart.clear()
  const option = {
    title: {
      text: title,
      textStyle: {
        fontSize: fontSize(30),
        color: '#000000'
      }
    },
    color: ['rgba(8,132,245,1)', 'rgba(15,205,125,1)'],
    animation: true,
    tooltip: {
      show: true,
      trigger: 'axis', // 触发类型 可选“item/axis”
      axisPointer: {
        type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
        lineStyle: {
          // 直线指示器样式设置
          width: 2,
          type: 'solid'
        },
        shadowStyle: {
          // 阴影指示器样式设置
          width: 'auto', // 阴影大小
          color: 'rgba(1, 182, 255,0.20)' // 阴影颜色
        }
      },
      hideDelay: 100, // 隐藏延迟，单位ms
      transitionDuration: 0.4, // 动画变换时间，单位s
      backgroundColor: 'rgba(255,255, 255,0.5)', // 提示框浮层的背景颜色。
      borderColor: 'rgba(255,255, 255,0)',
      borderRadius: 0,
      borderWidth: 1, // 提示框浮层的边框宽。
      padding: 5, // 提示框浮层内边距，
      textStyle: {
        fontSize: 10,
        align: 'left',
        color: '#000'
      },
      // 添加单位
      formatter: function (params) {
        let htmlStr = `<div class='toolTip'>`
        params.map((item, index) => {
          if (index === 0) {
            htmlStr += `<div style='font-size:14px;color:#000000;' class= 'titleLine'>${item.axisValue}日</div>`
            // htmlStr += `<div style="margin-top:5px;height:1px;width:100%;background: rgba(255,255,255,0.50);" class="titleLineBottom"></div>`
          }
          htmlStr += `<div style='margin-top:5px;'>
                           <span style='display:inline-block;width:10px;height:10px;background:${item.color
            };border-radius:50%;' class="iconBox">
                           </span>
                           <span  class="label style='text-align:left;'">${item.seriesName}：</span>
                           <span  class="value" style='font-weight:bold"'><span>${item.value ? item.value + type : 0 + type
            }</span></span>
                           </div>`
        })
        htmlStr += `</div>`
        return htmlStr
      }
    },
    grid: {
      show: false,
      // 直角坐标系内绘图网格
      top: '20%',
      right: '2%',
      bottom: '15%',
      left: '15%',
      borderColor: 'rgba(192, 192, 192,0.6)'
    },
    legend: {
      // 图例
      right: 0,
      icon: 'roundRect',
      itemHeight: 2,
      itemWidth: 15,
      itemGap: 20,
      textStyle: {
        fontSize: fontSize(20),
        color: '#000000'
      }
    },
    xAxis: {
      type: 'category',
      // name: '时间',
      boundaryGap: false,
      data: chartData.xAxis,
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgba(0, 0, 0,0.6)', // 更改坐标轴文字颜色
          fontSize: fontSize(25)
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        // 坐标背景线
        show: false,
        lineStyle: {
          color: 'rgba(192, 192, 192,0.6)',
          type: 'dashed', // 坐标轴背景虚线 solid(实线)
          width: 1
        }
      }
    },
    yAxis: {
      type: 'value',
      //   name: '(辆)',
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(192, 192, 192,0.4)',
          type: 'dashed', // 坐标轴背景虚线 solid(实线)
          width: 1
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgba(0, 0, 0,0.6)', // 更改坐标轴文字颜色
          fontSize: fontSize(20)
        }
      }
    },
    series: [
      {
        data: chartData.yData,
        smooth: true, // 是否平滑曲线
        name: '本月',
        symbol: 'none',
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(8,132,245,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgba(8,132,245,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgba(8,132,245,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(8,132,245,0.1)'
              }
            ],
            global: false // 缺省为 false
          }
        },
        lineStyle: {
          color: 'rgba(8,132,245,1)',
          width: 2
        }
      },
      {
        data: chartData.zData,
        smooth: true, // 是否平滑曲线
        name: '上月',
        symbol: 'none',
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgb(15,205,125,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgb(15,205,125,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgb(15,205,125,0.2)'
              },
              {
                offset: 1,
                color: 'rgb(15,205,125,0.1)'
              }
            ],
            global: false // 缺省为 false
          }
        },
        lineStyle: {
          color: 'rgb(15,205,125,1)',
          width: 2
        }
      }
    ]
  }
  const arr1 = document.getElementsByClassName('chartBox')
  for (let i = 0; i < arr1.length; i++) {
    const key1 = arr1[i]
    if (key1.innerHTML === '') {
      echarts.init(key1).setOption(option)
    } else {
      myChart.setOption(option)
    }
  }

  setTimeout(() => {
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }, 10)
}

// export function echartLoad() {
//   // console.log(dataValue, 'dataValue')
//   var initDom = document.getElementById(id)
//   var myChart = echarts.init(initDom)
//   myChart.clear()
//   const option = {
//     title: [
//       {
//         text: '总里程',
//         x: 'center',
//         top: '22%',
//         textStyle: {
//           color: '#000',
//           fontSize: fontSize(23),
//           fontWeight: '400'
//         }
//       },
//       {
//         text: 529.61,
//         x: 'center',
//         top: '28%',
//         textStyle: {
//           fontSize: fontSize(60),
//           color: '#415B73',
//           fontFamily: 'ys',
//           foontWeight: '400'
//         }
//       },
//       {
//         text: '公里',
//         x: 'center',
//         top: '40%',
//         textStyle: {
//           color: '#000',
//           fontSize: fontSize(23),
//           fontWeight: '400'
//         }
//       }
//     ],
//     tooltip: {
//       trigger: 'item',
//       textStyle: {
//         fontSize: fontSize(23)
//       },
//       formatter: '{b}:{d}%'
//     },
//     legend: {
//       bottom: '10%',
//       left: 'center',
//       orient: 'vertical', // 竖向展示
//       height: '22%', // 图例容器的高度，超过会换行展示
//       icon: 'roundRect', // 图标样式设置
//       itemWidth: 7, // 图标宽设置
//       itemHeight: 7, // 图标长设置
//       itemGap: 12, // 图标之间的距离
//       formatter: function (name) {
//         // console.log(dataValue._rawValue)
//         // 图例自定义展示设置
//         let k // 公里数
//         let a // 占比// 总数
//         for (let i = 0; i < dataValue._rawValue.length; i++) {
//           if (dataValue._rawValue[i].name === name) {
//             k = dataValue._rawValue[i].kilo
//             a = dataValue._rawValue[i].value.toFixed(2) + '%'
//           }
//         }
//         return [`{name|${name}} {k|${k} 公里 ,}`, `{a| ${a}}`].join(' ')
//       },
//       textStyle: {
//         fontSize: fontSize(22),
//         rich: {
//           name: {
//             fontSize: fontSize(22),
//             color: '#415B73',
//             fontFamily: 'sy-m'
//           },
//           num: {
//             fontSize: fontSize(22),
//             color: '#415B73',
//             fontFamily: 'ys',
//             fontWeight: 400
//           },
//           a: {
//             fontSize: fontSize(22),
//             color: '#415B73',
//             fontFamily: 'ys'
//           }
//         }
//       }
//     },
//     series: [
//       // 内圈
//       {
//         name: '',
//         type: 'pie',
//         startAngle: 80,
//         radius: ['36%'],
//         // hoverAnimation: false,
//         center: ['50%', '35%'],
//         tooltip: {
//           show: false
//         },
//         itemStyle: {
//           color: 'rgba(66, 66, 66, 0.04)',
//           borderWidth: fontSize(4),
//           borderColor: '#77B7F9'
//         },

//         data: [100]
//       },
//       // 中间视图
//       {
//         name: '交通事件类型占比',
//         type: 'pie',
//         center: ['50%', '35%'],
//         radius: ['40%', '45%'],
//         avoidLabelOverlap: false,
//         itemStyle: {
//           borderWidth: fontSize(4), // 间距的宽度
//           borderColor: '#fff' // 背景色
//         },
//         label: {
//           show: false
//         },
//         emphasis: {
//           label: {
//             show: false
//           }
//         },
//         labelLine: {
//           show: false
//         },
//         data: dataValue.value
//       },
//       // 外圈圆环
//       {
//         name: '外边框',
//         type: 'pie',
//         startAngle: 90,
//         clockwise: false, // 顺时加载
//         emphasis: {
//           scale: false
//         }, // 鼠标移入变大
//         center: ['50%', '35%'],
//         radius: ['55%', '55%'],
//         label: {
//           show: false
//         },
//         tooltip: {
//           show: false
//         },
//         data: [
//           {
//             value: 2,
//             name: '',
//             itemStyle: {
//               borderWidth: 2,
//               borderColor: {
//                 colorStops: [
//                   {
//                     offset: 0,
//                     color: 'rgba(119,183,249,1)' // 0% 处的颜色
//                   },
//                   {
//                     offset: 0.5,
//                     color: 'rgba(119,183,249,0.1)' // 100% 处的颜色
//                   }
//                 ]
//               }
//             }
//           },
//           {
//             value: 2,
//             name: '',
//             itemStyle: {
//               borderWidth: 0,
//               borderColor: 'none'
//             }
//           }
//         ]
//       },
//       {
//         name: '外边框',
//         type: 'pie',
//         startAngle: 90,
//         clockwise: true, // 顺时加载
//         emphasis: {
//           scale: false
//         }, // 鼠标移入变大
//         center: ['50%', '35%'],
//         radius: ['55%', '55%'],
//         label: {
//           show: false
//         },
//         tooltip: {
//           show: false
//         },
//         data: [
//           {
//             value: 2,
//             name: '',
//             itemStyle: {
//               borderWidth: 2,
//               borderColor: {
//                 colorStops: [
//                   {
//                     offset: 0.5,
//                     color: 'rgba(119,183,249,0.1)' // 0% 处的颜色
//                   },
//                   {
//                     offset: 1,
//                     color: 'rgba(119,183,249,1)' // 100% 处的颜色
//                   }
//                 ]
//               }
//             }
//           },
//           {
//             value: 2,
//             name: '',
//             itemStyle: {
//               borderWidth: 0,
//               borderColor: 'none'
//             }
//           }
//         ]
//       }
//     ]
//   }
//   const arrChart = document.getElementsByClassName('echartBox')
//   for (let i = 0; i < arrChart.length; i++) {
//     const key1 = arrChart[i]
//     if (key1.innerHTML === '') {
//       echarts.init(key1).setOption(option)
//     } else {
//       myChart.setOption(option)
//     }
//   }

//   setTimeout(() => {
//     window.addEventListener('resize', () => {
//       myChart.resize()
//     })
//   }, 10)
// }
